<!--
 * @Author: wjc
 * @Date: 2025-09-15 15:49:51
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-29 16:59:14
 * @Description: 
-->
<template>
  <main ref="contentElement" :style="style" class="bg-background-deep relative">
    <Slot :style="overlayStyle">
      <slot name="overlay"></slot>
    </Slot>
    <slot></slot>
  </main>
</template>

<script setup lang="ts">
  import type { ContentCompactType } from '@nice/types'

  import type { CSSProperties } from 'vue'

  import { computed } from 'vue'

  import { useLayoutContentStyle } from '@nice/hooks'
  import { Slot } from '@nice/nice-ui'

  interface Props {
    /**
     * 内容区域定宽
     */
    contentCompact: ContentCompactType
    /**
     * 定宽布局宽度
     */
    contentCompactWidth: number
    padding?: number
    paddingBottom?: number
    paddingLeft?: number
    paddingRight?: number
    paddingTop?: number
  }

  defineOptions({ name: 'LayoutContentContainer' })

  const props = withDefaults(defineProps<Props>(), {
    padding: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
  })

  const { contentElement, overlayStyle } = useLayoutContentStyle()

  const style = computed((): CSSProperties => {
    const { contentCompact, padding, paddingBottom, paddingLeft, paddingRight, paddingTop } = props

    const compactStyle: CSSProperties =
      contentCompact === 'compact'
        ? { margin: '0 auto', width: `${props.contentCompactWidth}px` }
        : {}
    return {
      ...compactStyle,
      flex: 1,
      padding: `${padding}px`,
      paddingBottom: `${paddingBottom}px`,
      paddingLeft: `${paddingLeft}px`,
      paddingRight: `${paddingRight}px`,
      paddingTop: `${paddingTop}px`,
    }
  })
</script>
